<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>View and search catalogue</title>

    <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/css/ui.jqgrid.css'/>"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/themes/base/jquery.ui.all.css'/>">
    <script src="<c:url value='/ui/jquery.ui.core.js'/>" type="text/javascript"></script>
    <script src="<c:url value='/ui/jquery.ui.widget.js'/>" type="text/javascript"></script>
    <script src="<c:url value='/ui/jquery.ui.button.js'/>" type="text/javascript"></script>
    <script src="<c:url value='/js/jquery-1.7.2.min.js'/>" type="text/javascript"></script>
    <script src="<c:url value='/js/i18n/grid.locale-en.js'/>" type="text/javascript"></script>
    <script src="<c:url value='/js/jquery.jqGrid.min.js'/>" type="text/javascript"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url:'<c:url value="/catalogue/search.html"/>',
                datatype:'json',
                mtype:'GET',
                colNames:['Entry Id', 'Description', 'Domain', 'Is Lateral', 'Is Active'],
                colModel:[
                    {name:'id', index:'id', width:55},
                    {name:'desc', index:'desc', width:500},
                    {name:'domain', index:'domain', width:100},
                    {name:'lateral', index:'lateral', width:100},
                    {name:'active', index:'active', width:100}
                ],
                pager:'#pager',
                rowNum:10,
                rowList:[10, 20, 30],
                sortname:'id',
                sortorder:'desc',
                viewrecords:true,
                gridview:true,
                caption:'Catalogue Entries'
            });
            $( "#searchEntries" ).button();
            $( "#searchEntries" ).click(function() { alert('ok'); });
        });
    </script>
</head>
<body>
<div id="view-catalogue">
    <div id="search-catalogue" style="padding-bottom: 25px">
        <h2>Search catalogue entries</h2>
        <label for="textDesciption">Search description: </label><input name="textDesciption" id="textDesciption" type="text" style="padding-right: 15px"/>
        <button id="searchEntries" class="An anchor">Search</button>
    </div>
    <table id="list">
        <tr>
            <td/>
        </tr>
    </table>
    <div id="pager"></div>
</div>
</body>
</html>